<script setup>
import { RouterLink, RouterView, useRoute } from 'vue-router'
import { ref,watch } from 'vue';

const route = useRoute();

const state = ref(true);

watch(() => route.meta.isTab, (newValue, oldValue) => {
  console.log(newValue, oldValue);
  if(newValue === false) {
    state.value = false;
  }
  if(oldValue === false) {
    state.value = true;
  }
});
const fade = ref('left');
watch(() => route.meta.index,
  (newValue, oldValue) => {
    if (newValue > oldValue) {
      fade.value = 'left';
    }
    else if(newValue < oldValue) {
      fade.value = 'right';
    }
    else {
      fade.value = '';
    }
  }
);
</script>

<template>
  <!-- <span class="iconfont icon-gouwuche"></span> -->
  <div class="main">
    <RouterView >
      
    </RouterView>
  </div>
  

  <!-- 下导航 -->
  <div class="footer" v-if="state">
    <Nav></Nav>
  </div>
</template>

<style scoped>
.footer{
  margin-top: 55px;
}

</style>
